@import "./common2";

@function getvw($w) {
    @return($w/1920)*100+vw;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    user-select: none;
    // box-sizing: border-box;
}

body,
html {
    min-width: 900px;
}

.box {
    nav {
        .nav_center {
            ul {
                li:nth-of-type(6) {
                    height: 65px;
                    text-align: center;
                    line-height: 65px;
                    border-bottom: 1px solid #19bc64;
                    a {
                        color: #19bc64;
                    }
                }
            }
        }
    }

    .banner {
        width: 100%;
        position: relative;

        img {
            width: 100%;

        }

        div {
            width: getvw(560);
            height: getvw(150);
            position: absolute;
            top: getvw(130);
            left: getvw(1000);
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            p:nth-of-type(1) {
                font-size: getvw(60);
                color: white;
            }

            p:nth-of-type(2) {
                font-size: getvw(30);
                color: white;
                font-weight: 100;
            }
        }
    }

    .service_concept {
        .service_concept_title {
            width: getvw(450);
            margin: 0 auto;
            position: relative;

            p:nth-of-type(1) {
                font-size: getvw(36);
                color: #666666;
                font-weight: 300;
                text-align: center;
            }

            p:nth-of-type(2) {
                font-size: getvw(24);
                color: #333333;
                text-align: center;
                margin-top: getvw(20);
                position: relative;
            }

            p:nth-of-type(2)::after {
                content: '';
                width: getvw(100);
                height: getvw(1);
                background-color: #999999;
                position: absolute;
                top: getvw(17);
                left: getvw(60);
            }

            p:nth-of-type(2)::before {
                content: '';
                width: getvw(100);
                height: getvw(1);
                background-color: #999999;
                position: absolute;
                top: getvw(17);
                right: getvw(60);
            }
        }

        .service_concept_main {
            width: getvw(1200);
            height: getvw(685);
            margin: 0 auto;
            box-sizing: border-box;
            padding-top: getvw(72);

            p {
                width: getvw(928);
                height: getvw(44);
                margin: 0 auto;
                text-align: center;
                font-size: getvw(16);
                color: #666666;
                margin-bottom: getvw(90);
            }

            img {
                width: getvw(1200);
                height: getvw(408);
            }
        }
    }

    .service_support {
        box-sizing: border-box;
        background-image: url(../img/ServicePlatform/servicesupport.png);
        padding-top: getvw(80);

        .service_support_title {
            width: getvw(450);
            margin: 0 auto;
            margin-bottom: getvw(80);
            position: relative;

            p:nth-of-type(1) {
                font-size: getvw(36);
                color: white;
                font-weight: 300;
                text-align: center;
            }

            p:nth-of-type(2) {
                font-size: getvw(24);
                color: white;
                text-align: center;
                margin-top: getvw(20);
                position: relative;
            }

            p:nth-of-type(2)::after {
                content: '';
                width: getvw(100);
                height: getvw(1);
                background-color: white;
                position: absolute;
                top: getvw(17);
                left: getvw(60);
            }

            p:nth-of-type(2)::before {
                content: '';
                width: getvw(100);
                height: getvw(1);
                background-color: white;
                position: absolute;
                top: getvw(17);
                right: getvw(60);
            }
        }

        .service_support_main {
            width: getvw(1200);
            height: getvw(535);
            margin: 0 auto;
            display: flex;
            justify-content: space-between;

            div {
                width: getvw(260);
                height: getvw(460);
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                div:nth-of-type(1) {
                    width: getvw(100);
                    height: getvw(100);
                    border-radius: 50%;
                    margin: 0 auto;
                    background-color: #e6e6e6;
                    text-align: center;
                    line-height: getvw(100);

                    i {
                        font-size: getvw(60);
                    }
                }

                div:nth-of-type(2) {
                    width: 100%;
                    height: getvw(2);
                    background-color: white;
                }

                p {
                    color: white;
                }

                p:nth-last-of-type(1) {
                    width: getvw(275);
                    height: getvw(184);
                    line-height: getvw(30);
                }
                p:nth-of-type(3){
                    font-size: getvw(14);
                }

            }
        }

    }

    .service_commitment {
        width: 100%;
        height: getvw(625);

        .service_commitment_title {
            width: getvw(450);
            height: getvw(185);
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            margin: 0 auto;
            position: relative;

            p:nth-of-type(1) {
                font-size: getvw(36);
                font-weight: 300;
                text-align: center;
            }

            p:nth-of-type(2) {
                font-size: getvw(24);
                text-align: center;
                position: relative;
            }

            p:nth-of-type(2)::after {
                content: '';
                width: getvw(100);
                height: getvw(1);
                background-color: black;
                position: absolute;
                top: getvw(17);
                left: getvw(60);
            }

            p:nth-of-type(2)::before {
                content: '';
                width: getvw(100);
                height: getvw(1);
                background-color: black;
                position: absolute;
                top: getvw(17);
                right: getvw(60);
            }
        }

        .service_commitment_main {
            width: getvw(1100);
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            div {
                width: getvw(300);
                height: getvw(215);
                text-align: center;
                box-sizing: border-box;
                padding: getvw(40) 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-evenly;
                color: #4d4d4d;

                i {
                    font-size: getvw(50);
                    color: #4d4d4d;
                }

                div {
                    width: getvw(100);
                    height: getvw(2);
                    background-color: #4d4d4d;
                    padding: 0;
                }
            }
        }
    }

    .online_warranty {
        width: 100%;
        height: getvw(660);
        position: relative;
        background-image: url(../img/ServicePlatform/online.png);

        .online_warranty_main {
            width: 50%;
            height: getvw(660);
            position: absolute;
            top: 0;
            right: 0;
            background-color: rgba($color: #000000, $alpha: 0.5);


            p:nth-of-type(1) {
                font-size: getvw(36);
                color: white;
                font-weight: 100;
                margin: getvw(20) 0;
            }

            .div {
                width: 100%;
                height: getvw(2);
                background-color: #999999;
            }

            p:nth-of-type(2) {
                font-size: getvw(24);
                color: white;
                margin-top: getvw(20);
            }

            .information {
                width: getvw(550);
                height: getvw(500);
                margin-left: getvw(100);
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                div {
                    width: 100%;
                    background-color: none;
                    height: getvw(40);
                    font-size: getvw(18);
                    color: white;
                    display: flex;
                    
                    div{
                        width: getvw(130);
                        height: getvw(40);
                        text-align: right;
                        display: flex;
                        align-items: center;
                        justify-self: right;
                    }

                    input {
                        width: getvw(385);
                        height: getvw(40);
                    }
                    textarea{
                        width: getvw(385);
                        height: getvw(130);
                    }

                }

                div:nth-of-type(5){
                    height: getvw(130);
                }
                
                button{
                    width: getvw(150);
                    height: getvw(40);
                    border-radius: 20px;
                    background-color: #1fca6e;
                    border: none;
                    color: white;
                    font-size: getvw(18);
                    margin-left: getvw(150);
                }
            }
        }
    }

}